<template>
  <Header
      :style="{
            position: 'fixed',
            width: '100%',
            height: '48px',
            backgroundColor: '#515A6E',
            lineHeight: '48px',
            padding: '0 20px'
          }">
    <Button class="m-r-5px" size="small" type="primary"
            :disabled="!pageMetadata.id"
            @click="saveCurrentEditPage">保存</Button>

    <Poptip transfer trigger="hover" placement="bottom-start"
            title="说明" content="一般在执行布局块复制拷贝的时候需要点击保存并重载">
      <Button class="m-r-5px" size="small" type="success"
            :disabled="!pageMetadata.id"
            @click="saveCurrentEditPageAndHeavyLoad">保存并重载</Button>
    </Poptip>

    <Poptip transfer trigger="hover" placement="bottom-start"
            title="说明" content="可以将当前页面临时保存在浏览器本地存储中">
      <ButtonGroup class="m-r-5px" size="small">
        <Button type="primary" :disabled="!pageMetadata.id" @click="saveDraft">存为草稿</Button>
        <Button type="primary" :disabled="!pageMetadata.id" @click="loadDraft">加载草稿</Button>
      </ButtonGroup>
    </Poptip>
    <Button class="m-r-5px" size="small" type="primary"
            :disabled="!pageMetadata.id"
            @click="clearCanvas">清空画布</Button>
    <Button class="m-r-5px" size="small" type="primary"
            :disabled="!pageMetadata.id"
            @click="clearMultiSelect">清除多选</Button>
    <Button class="m-r-5px" size="small" type="primary"
            @click="clearLocalStorage">清空本地存储</Button>
    <Button class="m-r-5px" size="small" type="primary"
            :disabled="!pageMetadata.id"
            @click="stepBackward">撤回</Button>

    <Button class="m-r-5px" size="small" type="primary"
            :disabled="!$store.state.designer.pageMetadata.id"
            @click="previewPage">预览</Button>

    <div :style="{float: 'right'}">
      <Button class="m-r-5px" size="small" type="primary"
              @click="globalConfigDataDrawerVisible = !globalConfigDataDrawerVisible">全局配置</Button>
      <Button size="small" @click="documentationModalVisible = !documentationModalVisible">基础使用说明与系统更新日志</Button>
    </div>


    <Drawer
        title="全局配置"
        v-model="globalConfigDataDrawerVisible"
        width="450"
        :mask-closable="true">
      <GlobalConfigDataForm></GlobalConfigDataForm>
    </Drawer>

    <Modal
        v-model="documentationModalVisible"
        draggable
        scrollable
        title="基础使用说明与系统更新日志"
        width="850"
        :mask="true"
        :z-index="999">
      <div>
        <Tabs value="1" :style="{marginTop: '-17px'}">
          <TabPane label="基础使用说明" name="1">
            <h3>--新建页面--</h3>
            <p>
              目前设计器只对绝对布局方案做了优化，建议创建绝对布局方案页面
            </p>
            <br/>
            <h3>--如何添加组件--</h3>
            <p>
              本系统已布局块作为功能组件的容器，要拖拽组件至画布，需要先添加布局块。<br/>
              布局块添加方式：在右侧边栏的画布配置一栏，点击添加布局块按钮，之后即可点击画布中新增的布局块，然后在组件库中拖拽对应组件至布局块中即可
            </p>
            <br/>
            <h3>--如何删除布局块与解绑关联组件--</h3>
            <p>
              在布局块中右键，即可看到对应的操作菜单。
            </p>
            <br/>
            <h3>--如何多选布局块--</h3>
            <p>
              Mac系统下按住command按键（windows系统下按下ctrl按键），然后点击需要多选的布局块即可选中多个布局块。<br/>
              选中之后，可以使用方向键移动多选的布局块，也可以复制拷贝多个布局块，当然也能删除选中的布局块。
            </p>
            <br/>
            <h3>--如何拖拽框选多个布局块--</h3>
            <p>
              在画布空白处按住alt按键，即可使用鼠标单击按住拖拽框选多个布局块
            </p>
          </TabPane>
          <TabPane label="更新日志" name="2">
            <ul>
              <li>
                <h4>2019-09-22</h4>
                <p>1、实现布局块拖拽显示辅助线与位置信息</p>
                <p>2、新增清空参考线功能</p>
                <p>3、调整设计器布局，将缩放功能移至绝对布局设计器模块中</p>
              </li>
              <li>
                <h4>2019-09-21</h4>
                <p>1、绝对布局设计器增加标尺功能</p>
                <p>2、修复标尺内容滚动条位置异常的BUG</p>
                <p>3、优化设计器页面</p>
                <p>4、画布宽高单位取消em和rem单位</p>
              </li>
              <li>
                <h4>2019-09-20</h4>
                <p>1、新增收展右侧边栏功能</p>
              </li>
              <li>
                <h4>2019-09-19</h4>
                <p>1、封装组件库</p>
                <p>2、优化设计器表单样式</p>
                <p>3、绝对布局布局块放置增加状态样式</p>
                <p>4、修复画布因为背景图片的影响不显示网格的BUG</p>
                <p>5、增加绝对布局设计模式下画布缩放功能，并设置缩放系数为0.2</p>
                <p>6、修复在缩放模式下方向键无法调整位置的BUG</p>
              </li>
              <li>
                <h4>2019-09-18</h4>
                <p>1、绝对布局设计器布局块右键菜单增加置顶功能</p>
                <p>2、布局块右键菜单增加切换拖拽状态功能</p>
                <p>3、绝对布局设计器新增ctrl + a全选功能</p>
                <p>4、修复组件库展开的BUG</p>
              </li>
              <li>
                <h4>2019-09-17</h4>
                <p>1、实现设计器结构树切换显示隐藏布局块功能，优化设计器代码目录结构</p>
              </li>
              <li>
                <h4>2019-09-10</h4>
                <p>1、增加框选功能</p>
              </li>
            </ul>
          </TabPane>
        </Tabs>

      </div>
      <div slot="footer">
        <Button type="default" @click="documentationModalVisible = false">关闭</Button>
      </div>
    </Modal>

  </Header>
</template>

<script>
  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getField',
    mutationType: 'designer/updateField',
  });

  export default {
    name: 'DesignerHeader',
    data() {
      return {
        globalConfigDataDrawerVisible: false,
        documentationModalVisible: false,
      }
    },
    mounted() {

    },
    methods: {

      /**
       * 保存当前编辑页面
       */
      saveCurrentEditPage () {
        let page = Object.assign({}, this.pageMetadata);
        page.layout = JSON.stringify(page.layout);
        delete page.echartThemeJsonText;
        this.$PnApi.PageApi.updatePage(page).then(result => {
          if(result.data.code == 1) {
            this.$Message.success('保存成功')
          }
        })
      },

      /**
       * 保存并重载当前页面
       */
      saveCurrentEditPageAndHeavyLoad () {
        this.saveCurrentEditPage();
        setTimeout(()=>{
          this.$store.commit('designer/resetDesigner');
          this.$store.dispatch('designer/loadPage', this.pageMetadata.id);
        },150);
      },

      /**
       * 保存草稿
       */
      saveDraft () {
        localStorage.setItem('layoutCache', JSON.stringify(this.$store.state.designer.pageMetadata.layout));
        this.$Message.success('已将当前布局保存至草稿')
      },

      /**
       * 加载草稿
       */
      loadDraft () {
        if(localStorage.getItem('layoutCache')) {
          this.$store.commit('designer/setLayout', JSON.parse(localStorage.getItem('layoutCache')))
        }
      },

      clearCanvas () {
        this.$Modal.confirm({
          title: '提醒',
          content: '确认清空画布内容吗？',
          onOk: () => {
            this.$store.commit('designer/resetDesigner')
          }
        });
      },

      /**
       * 清除多选
       */
      clearMultiSelect () {
        this.$store.commit('designer/setCurrentSelectLayoutItemIds', []);
        this.$Message.success('已清除多选数据')
      },

      /**
       * 清空本地存储
       */
      clearLocalStorage () {
        this.$Modal.confirm({
          title: '提醒',
          content: '确认要清空本地存储吗？',
          onOk: () => {
            localStorage.clear();
            this.$Message.success('成功清空本地存储数据，建议重新刷新页面')
          }
        });
      },

      /**
       * 后退一步
       */
      stepBackward () {
        if(localStorage.getItem('PageMetadataLayoutLocalRecord')) {
          let PageMetadataLayoutLocalRecord = JSON.parse(localStorage.getItem('PageMetadataLayoutLocalRecord'));
          this.$store.commit('designer/setLayout', PageMetadataLayoutLocalRecord[0])
        }
      },

      previewPage () {
        //console.log(this.pageMetadata);
        // 将当前工程信息和当前打开页面的源数据存入本地存储
        localStorage.setItem('previewProjectInfo', JSON.stringify(this.projectInfo));
        localStorage.setItem('previewPageMetadata', JSON.stringify(this.pageMetadata));
        this.$PnUtil.openPageToBlank(this.pageMetadata.path, {preview: 'true'})
      },
    },
    computed: {
      ...mapFields({
        projectInfo: 'projectInfo',
        pageMetadata: 'pageMetadata'
      }),
    }
  }
</script>

<style scoped>

</style>
